<template>
    <BasePage title="实时监控管理">
        <div class="box">
            <div class="monitor-container">
                <div v-for="(item,index) of state.deviceList"
                    :key="index"
                    class="single"
                >
                    <div class="item-box" :class="{ 'active-player': state.actWindow.ip === item.ip }">
                        <MonitorBox
                            :ref="el => monitorRef[item.ip] = el"
                            :options="item"
                            @closeVideo="closeVideo"
                            @click="handleHighlight(item)"
                        />
                    </div>
                </div>
            </div>
        </div>
    </BasePage>
</template>

<script lang="jsx" setup>
import { reactive,ref  } from 'vue';
import MonitorBox from './monitor.vue'

defineOptions({
    name: 'MonitorRealTime'
})

const monitorRef = ref({})


const state = reactive({
    boxStyle: {},
    actWindow: {},
    //测试数据
    deviceList:[
        {   
            onlyId: 1,
            ip:"192.168.0.0.1",
            port:"8000",
            userName:"admin",
            password:"hppy",
            state: 0
        },
        {   
            onlyId: 2,
            ip:"192.168.0.0.1",
            port:"8000",
            userName:"admin",
            password:"hppy",
            state: 1
        }
    ]
})

const closeVideo = ip => {
    console.log(ip)
}

const handleHighlight= ip=>{
    console.log(ip)
}

// 改变布局
const changeLayout = num => {
    switch (num) {
        case 1:
            state.boxStyle = {
                width: '100%',
                height: '100%'
            }
            break
        case 2:
            state.boxStyle = {
                width: '50%',
                height: '100%'
            }
            break
        case 4:
            state.boxStyle = {
                width: '50%',
                height: '50%'
            }
            break
        case 6:
            state.boxStyle = {
                width: '33.3%',
                height: '50%'
            }
            break
        default:
            break
    }
}


</script>

<style lang="scss" scoped>
.box {
      flex: 1;
      .monitor-container {
        height: calc(100% - 35px);
        display: flex;
        flex-wrap: wrap;
        overflow-y: auto;
        .single {
          padding-bottom: 8px;
          padding-right: 8px;
          .item-box {
            height: 100%;
            width: 100%;
            border: 2px solid transparent;
          }
          .active-player {
            border-color: yellow;
          }
        }
      }
}
</style>